<template>
  <div>
    <!-- <van-nav-bar class="header" title="品牌街" left-arrow @click-left="onClickLeft">
      <span class="more" slot="right">
        <img src="http://127.0.0.1/img/more.png" alt />
      </span>
    </van-nav-bar> -->
    <TitleBar ref="myTitle"></TitleBar>
    <div class="bannerB">
      <img src="http://127.0.0.1/img/brands/brands-01.png" alt />
    </div>
    <!-- tab切换 -->
    <ul class="tabs">
      <li
        v-for="(item, index) in tabTitle"
        :key="index"
        :class="{active:index == tabNum}"
        @click="tab(index)"
      >
        <div>
          <img :src="item.imgUrl" alt />
        </div>
        <div>{{item.title}}</div>
      </li>
    </ul>
    <ul class="centers">
      <li
        v-for="(item, index) in tabCenter"
        :key="index"
        v-show="index == tabNum"
      >
        {{item}}
      </li>
      <li>
        <!-- 除了第一个tab选项有，其他选项都没有这一栏 -->
        <div class="box-top">
          <div class="shop-box">
            <img src="http://127.0.0.1/img/brands/brands-06.png" alt />
            <div class="shop-title">海蓝之谜精粹水</div>
          </div>
          <div class="shop-box">
            <img src="http://127.0.0.1/img/brands/brands-08.png" alt />
            <div class="shop-title">海蓝之谜精粹水</div>
          </div>
          <div class="shop-box">
            <img src="http://127.0.0.1/img/brands/brands-07.png" alt />
            <div class="shop-title">海蓝之谜精粹水</div>
          </div>
        </div>

        <div class="box-title">
          <div class="title-center">
            <div class="small-img">
              <img src="http://127.0.0.1/img/brands/brandsIcon-09.png" alt />
            </div>
            <div class="big-img">
              <img src="http://127.0.0.1/img/brands/brandsIcon-08.png" alt />
            </div>
            <div>甄选大牌</div>
            <div class="big-img">
              <img src="http://127.0.0.1/img/brands/brandsIcon-08.png" alt />
            </div>
            <div class="small-img">
              <img src="http://127.0.0.1/img/brands/brandsIcon-09.png" alt />
            </div>
          </div>
        </div>
        <div class="sift-box">
          <div class="sift-top">
            <div class="sift-Bg">
              <img src="http://127.0.0.1/img/brands/brands-02.png" alt />
            </div>
            <div class="explain-box">
              <div class="explain-top">
                <div class="brand-img">
                  <img src="http://127.0.0.1/img/brands/brands-03.png" alt />
                </div>
                <div>雅诗兰黛</div>
              </div>
              <div class="title">
                小棕瓶精华
                <span class="colorA">599</span>
              </div>
              <div class="promptly-box">
                <div>立即抢购</div>
                <div>
                  <img src="http://127.0.0.1/img/brands/brands-11.png" alt />
                </div>
              </div>
            </div>
          </div>
          <div class="sift-bottom">
            <div class="shop-box">
              <div>
                <img src="http://127.0.0.1/img/brands/brands-04.png" alt />
              </div>
              <div>
                <span class="price">￥599</span>
                <span class="price-delete">￥768</span>
              </div>
            </div>
            <div class="shop-box">
              <div>
                <img src="http://127.0.0.1/img/brands/brands-04.png" alt />
              </div>
              <div>
                <span class="price">￥599</span>
                <span class="price-delete">￥768</span>
              </div>
            </div>
            <div class="shop-box">
              <div>
                <img src="http://127.0.0.1/img/brands/brands-04.png" alt />
              </div>
              <div>
                <span class="price">￥599</span>
                <span class="price-delete">￥768</span>
              </div>
            </div>
          </div>
        </div>
        <div class="sift-box">
          <div class="sift-top">
            <div class="sift-Bg">
              <img src="http://127.0.0.1/img/brands/brands-10.png" alt />
            </div>
            <div class="explain-box">
              <div class="explain-top">
                <div class="brand-img">
                  <img src="http://127.0.0.1/img/brands/brands-05.png" alt />
                </div>
                <div>苏泊尔</div>
              </div>
              <div class="title">
                薄如蝉翼电磁炉
                <span class="colorA">869</span>
              </div>
              <div class="promptly-box">
                <div>立即抢购</div>
                <div>
                  <img src="http://127.0.0.1/img/brands/brands-11.png" alt />
                </div>
              </div>
            </div>
          </div>
          <div class="sift-bottom">
            <div class="shop-box">
              <div>
                <img src="http://127.0.0.1/img/brands/brands-09.png" alt />
              </div>
              <div>
                <span class="price">￥599</span>
                <span class="price-delete">￥768</span>
              </div>
            </div>
            <div class="shop-box">
              <div>
                <img src="http://127.0.0.1/img/brands/brands-09.png" alt />
              </div>
              <div>
                <span class="price">￥599</span>
                <span class="price-delete">￥768</span>
              </div>
            </div>
            <div class="shop-box">
              <div>
                <img src="http://127.0.0.1/img/brands/brands-09.png" alt />
              </div>
              <div>
                <span class="price">￥599</span>
                <span class="price-delete">￥768</span>
              </div>
            </div>
          </div>
        </div>
      </li>
    </ul>
    <van-tabbar class="bottomNav" v-model="active">
      <van-tabbar-item
        v-for="(item, index) in icon"
        :key="index"
      >
        <span>{{item.name}}</span>
        <img
          slot="icon"
          slot-scope="props"
          :src="props.active ? item.active : item.inactive"
        />
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import TitleBar from '../components/TitleBar'
export default {
  name: "Brands",
  components: {
    TitleBar
  },
  data() {
    return {
      active: 0,
      titleName:{
        name:"用户中心",
        more:"http://127.0.0.1/img/more.png"
      },
      icon: [
        {
          name: "品牌街",
          active: "http://127.0.0.1/img/brands/brandsIcon-10.png",
          inactive: "http://127.0.0.1/img/brands/brandsIcon-11.png"
        },
        {
          name: "海外好货",
          active: "http://127.0.0.1/img/brands/brandsIcon-12.png",
          inactive: "http://127.0.0.1/img/brands/brandsIcon-13.png"
        },
        {
          name: "预售专场",
          active: "http://127.0.0.1/img/brands/brandsIcon-14.png",
          inactive: "http://127.0.0.1/img/brands/brandsIcon-15.png"
        },
        {
          name: "会员专区",
          active: "http://127.0.0.1/img/brands/brandsIcon-16.png",
          inactive: "http://127.0.0.1/img/brands/brandsIcon-17.png"
        }
      ],
      tabTitle: [
        {
          imgUrl: "http://127.0.0.1/img/brands/brandsIcon-01.png",
          title: "精品推荐"
        },
        {
          imgUrl: "http://127.0.0.1/img/brands/brandsIcon-02.png",
          title: "美妆个护"
        },
        {
          imgUrl: "http://127.0.0.1/img/brands/brandsIcon-03.png",
          title: "母婴用品"
        },
        {
          imgUrl: "http://127.0.0.1/img/brands/brandsIcon-04.png",
          title: "生活电器"
        },
        {
          imgUrl: "http://127.0.0.1/img/brands/brandsIcon-05.png",
          title: "家用日化"
        },
        {
          imgUrl: "http://127.0.0.1/img/brands/brandsIcon-06.png",
          title: "家居生活"
        },
        {
          imgUrl: "http://127.0.0.1/img/brands/brandsIcon-07.png",
          title: "酒水饮料"
        }
      ],
      tabCenter: ["123"],
      tabNum: 0
    };
  },
  methods: {
    tab(index) {
      this.tabNum = index;
    }
  }
};
</script>

<style lang="scss">
.bottomNav{
  z-index: 999;
  .van-tabbar-item--active {
    color: #d81e06 !important;
  }
}


.colorA {
  color: #e00000;
}

.sift-box {
  background: #ffffff;
  border-top-right-radius: 0.266667rem;
  border-top-left-radius: 0.266667rem;
  margin-bottom: 0.2rem;

  .sift-top {
    height: 3.333333rem;
    position: relative;

    .sift-Bg {
      width: 100%;
      height: 3.333333rem;

      img {
        width: 100%;
        height: 100%;
        align-items: center;
      }
    }
  }

  .explain-box {
    width: 4.866667rem;
    height: 2.533333rem;
    position: absolute;
    top: 0.266667rem;
    left: 0.333333rem;
    background: #f2f2f2;
    border-radius: 0.266667rem;

    .explain-top {
      height: 1.106667rem;
      line-height: 1.106667rem;
      font-size: 0.4rem;
      color: #3d3d3d;
      display: flex;
      justify-content: flex-start;
      overflow: hidden;

      .brand-img {
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: relative;
        left: -0.2rem;

        img {
          width: 2.133333rem;
          height: 0.746667rem;
        }
      }
    }

    .title {
      font-size: 0.453333rem;
      font-weight: 550;
      color: #3d3d3d;
      text-align: left;
      padding-left: 0.2rem;
    }

    .promptly-box {
      height: 0.666667rem;
      line-height: 0.666667rem;
      text-align: left;
      padding-left: 0.2rem;
      display: flex;
      justify-content: flex-start;
      align-items: center;

      div {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        margin-right: 0.133333rem;

        img {
          width: 0.4rem;
          height: 0.4rem;
        }
      }
    }
  }

  .sift-bottom {
    height: 4.133333rem;
    padding: 0.2rem 0;
    display: flex;
    justify-content: space-around;

    .shop-box {
      width: 2.866667rem;
      height: 3.333333rem;

      img {
        width: 100%;
        height: 100%;
      }

      .price {
        color: #e00000;
        font-size: 0.4rem;
        font-weight: 550;
      }

      .price-delete {
        color: #bebebe;
        font-size: 0.32rem;
        text-decoration: line-through;
      }
    }
  }
}

.box-title {
  height: 1.2rem;
  display: flex;
  justify-content: space-around;

  .title-center {
    height: 1.2rem;
    display: flex;

    div {
      height: 1.2rem;
      line-height: 1.2rem;
      margin: 0 0.2rem;
      font-size: 0.453333rem;
      color: #ffffff;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
    }

    .big-img img {
      width: 0.4rem;
      height: 0.4rem;
    }

    .small-img img {
      width: 0.266667rem;
      height: 0.266667rem;
    }
  }
}

.box-top {
  width: 100%;
  padding: 0.266667rem;
  display: flex;
  justify-content: space-around;
  box-sizing: border-box;
  border: 0.013333rem solid #ffffff;
  border-radius: 0.266667rem;

  .shop-box {
    width: 2.933333rem;
    height: 3.533333rem;
    position: relative;
    border-radius: 0.266667rem;
    overflow: hidden;

    img {
      width: 100%;
      height: 100%;
      align-items: center;
    }

    .shop-title {
      width: 100%;
      height: 0.6rem;
      line-height: 0.6rem;
      position: absolute;
      bottom: 0;
      left: 0;
      font-size: 0.333333rem;
      color: #ffffff;
      background: rgba(0, 0, 0, 0.6);
    }
  }
}

//tab切换
.tabs {
  width: 10rem;
  color: #ffffff;
  display: flex;
  justify-content: space-around;
  display: -webkit-box;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  background: #f77777;

  li {
    width: 2rem;
    height: 1.333333rem;
    padding: 0.2rem 0;
    font-size: 0.346667rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;

    img {
      width: 0.733333rem;
      height: 0.733333rem;
      align-items: center;
    }
  }

  .active {
    background: #f06363;
  }
}

.centers {
  padding: 0!important;
  li {
    background: #f06363;
    padding: 0.2rem;
  }
}

.tabs::-webkit-scrollbar {
  display: none;
}

// banner
.bannerB {
  width: 100%;
  height: 5.333333rem;
  img {
    width: 100%;
    height: 100%;
    align-items: center;
    border-radius: 0 !important;
  }
}
// 头部
.header {
  background: #f77777 !important;
  .van-icon {
    color: #ffffff !important;
  }
  .van-nav-bar__title {
    color: #ffffff !important;
  }
}
.more {
  display: block;
  height: 100%;

  img {
    width: 0.666667rem;
    height: 0.133333rem;
  }
}



</style>
